<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../baidu_ife/node_modules/bootstrap/dist/css/bootstrap.css">
    <meta name="viewport" content="width=device-width, user-scalable=no">

    <style>
        .owner {
            animation: .2s linear fadeIn;
        }
        @keyframes fadeIn {
            0%{
                opacity: 0.5;
                margin-top: -1%;
            }
            100%{
                opacity: 1;
                margin-top: 0;
            }
        }

        .my-caret {
            display: inline-block;
            width: 0;
            height: 0;
            margin-left: 2px;
            border-top: 4px solid;
            border-left: 4px solid transparent;
            border-right:4px solid transparent;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="container">
        <br><br>
        <div class="row">
            <a href="#" class="btn btn-primary">按钮1</a>
            <a href="#" class="btn btn-success">按钮1</a>
            <a href="#" class="btn btn-danger">按钮1</a>
            <a href="#" class="btn btn-warning">按钮1</a>
            <a href="#" class="btn btn-info">按钮1</a>
        </div>

        <br><br>
        <div class="row">
            <div class="btn-group">
                <a href="#" class="btn btn-default">按钮1</a>
                <a href="#" class="btn btn-default active">按钮2</a>
                <a href="#" class="btn btn-primary">按钮3</a>
            </div>
        </div>

        <br><br>
        <div class="row">
            <div class="dropdown">
                <button data-toggle="dropdown" class="btn btn-default dropdown-toggle">下拉框 <span class="caret"></span></button>
                <ul class="dropdown-menu owner">
                    <li><a href="#">选项1</a></li>
                    <li><a href="#">选项2</a></li>
                    <li><a href="#">选项3</a></li>
                </ul>
            </div>
        </div>

        <div class="row">
            <span class="my-caret"></span>
        </div>
    </div>


<script src="../../baidu_ife/node_modules/jquery/dist/jquery.js"></script>
<script src="../../baidu_ife/node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>